<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="/lib/bootstrap-3.3.7-dist(1)/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/css/index.css">
</head>

<body>




    <!-- 导航栏 -->
    <header></header>

    <!-- banner -->
    <div class="banner">
        <span class="line"></span>
        <ul class="banner_side">
            <li>
                <div class="xiao306 orange"></div><span class="orangeColor">国风象棋</span>
            </li>
            <li>
                <div class="xiao304"></div><span>希洛克</span>
            </li>
            <li>
                <div class="xiao302 "></div><span>克伦特</span>
            </li>
        </ul>
    </div>
    <!-- 广告 -->

    <div class="circum">
        <div class="circum-box" id="homeListDIV">


            <!-- <div>
                <span class="pic"><img src="/images/da1.jpg" alt=""></span>
                <div>
                    <p>十年追忆画册（泰拉版）</p>
                    <span>299元</span>
                </div>

            </div> -->
            <!-- <div>
                <span class="pic"><img src="/images/da1(2).jpg" alt=""></span>
                <div>
                    <p>十年追忆画册（泰拉版）</p>
                    <span>299元</span>
                </div>

            </div>
            <div>
                <span class="pic"><img src="/images/da1(3).jpg" alt=""></span>
                <div>
                    <p>十年追忆画册（泰拉版）</p>
                    <span>299元</span>
                </div>

            </div>
            <div>
                <span class="pic"><img src="/images/da1(4).jpg" alt=""></span>
                <div>
                    <p>十年追忆画册（泰拉版）</p>
                    <span>299元</span>
                </div>

            </div>
            <div>
                <span class="pic"><img src="/images/da1(5).jpg" alt=""></span>
                <div>
                    <p>十年追忆画册（泰拉版）</p>
                    <span>299元</span>
                </div>

            </div>
            <div>
                <span class="pic"><img src="/images/da1(6).jpg" alt=""></span>
                <div>
                    <p>十年追忆画册（泰拉版）</p>
                    <span>299元</span>
                </div>

            </div>
            <div>
                <span class="pic"><img src="/images/da1(7).jpg" alt=""></span>
                <div>
                    <p>十年追忆画册（泰拉版）</p>
                    <span>299元</span>
                </div>

            </div> -->
        </div>
        <!-- 模板 -->
        <script type="text/html" id="homePage">
            <!-- 我要遍历list这个数据 他的每一项叫item  index是索引-->
            <div class="circum-btn">
                <h4>-HOT DERIVATIVE</h4>
                <h2>热门周边</h2>
                <i></i>
                <span>&lt;</span><span>&gt;</span>

            </div>

            {{each list item}}
            <div>
                <span class="pic">
                    <img src="{{item.src}}" alt="">
                </span>
                <div>
                    <p>{{item.text}}</p>
                    <span>"{{item.mach}}"</span>
                </div>
            </div>
            {{/each}}
        </script>
    </div>

    <!-- 人气系列 popularity -->
    <div class="popularity">
        <div class="popularity-box">
            <!-- 标题 -->
            <div class="popularity-title">
                <h4>-Popularty Series-</h4>
                <h2>人气系列</h2>
                <i></i>

            </div>
            <!-- 按钮 -->
            <div class="popularity-btn">
                <ul>
                    <li>礼包收藏</li>
                    <li>手办模型</li>
                    <li>数码电子</li>
                    <li>服饰日用</li>
                    <li>新品专区</li>

                </ul>
                <p>查看更多+</p>
            </div>
            <!-- 内容1  切换switchover-->
            <div class="popularity-picBox switchover">
                <div>
                    <span class="pic">
                            <img src="/images/1503.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1226.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1256.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1453.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1503.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1226.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1256.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1453.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>

            </div>
            <!-- 内容2 -->
            <div class="popularity-picBox">
                <div>
                    <span class="pic">
                            <img src="/images/1750.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追是打发斯蒂芬忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1561.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1644.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1665.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1667.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1799.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1750.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1799.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>

            </div>
            <!-- 内容3 -->
            <div class="popularity-picBox switchover">
                <div>
                    <span class="pic">
                            <img src="/images/1503.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1226.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1256.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1453.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1503.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1226.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1256.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1453.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>

            </div>
            <!-- 内容4 -->
            <div class="popularity-picBox">
                <div>
                    <span class="pic">
                            <img src="/images/1750.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追是打发斯蒂芬忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1561.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1644.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1665.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1667.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1799.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1750.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1799.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>

            </div>
            <!-- 内容5 -->
            <div class="popularity-picBox switchover">
                <div>
                    <span class="pic">
                            <img src="/images/1503.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1226.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1256.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1453.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1503.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1226.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1256.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>
                <div>
                    <span class="pic">
                            <img src="/images/1453.jpg" alt="">
                        </span>
                    <div>
                        <p>十年追忆画册（泰拉版）</p>
                        <span>299元</span>
                    </div>

                </div>

            </div>

        </div>
        <!-- 内容 -->


    </div>


    <!-- 品牌系列  Brand Series -->
    <div class="brand">
        <div class="brand-box">
            <!-- 标题 -->
            <div class="brand-title">
                <h4>-Brand Series-</h4>
                <h2>品牌系列</h2>
                <i></i>
                <p>查看更多+</p>
            </div>
            <div class="brand-pic">
                <img src="/images/zd4.jpg" alt="">
                <img src="/images/yd5.jpg" alt="">
            </div>
        </div>
    </div>


    <!-- 共创系统 creation -->
    <div class="creation">
        <!-- 标题 -->
        <div class="creation-title">
            <h4>-Co-creation Series-</h4>
            <h2>共创系列</h2>
            <i></i>
            <p>查看更多+</p>
        </div>
        <div class="creation-box swiper-container">

            <div class="swiper-wrapper">
                <ul>
                    <li class="swiper-slide clear-fix">

                        <span class="pic">
                                    <img src="/images/da1(41).jpg" alt="">
                                </span>
                        <div>
                            <p>《你喜欢故宫吗》挂画</p>
                            <span>现价￥38</span>


                        </div>
                    </li>
                    <li class="swiper-slide">

                        <span class="pic">
                                    <img src="/images/da1(42).jpg" alt="">
                                </span>
                        <div>
                            <p>《你喜欢故宫吗》挂画</p>
                            <span>现价￥38</span>


                        </div>
                    </li>
                    <li class="swiper-slide">

                        <span class="pic">
                                    <img src="/images/da1(43).jpg" alt="">
                                </span>
                        <div>
                            <p>《你喜欢故宫吗》挂画</p>
                            <span>现价￥38</span>


                        </div>
                    </li>
                    <li class="swiper-slide">

                        <span class="pic">
                                    <img src="/images/da1(41).jpg" alt="">
                                </span>
                        <div>
                            <p>《你喜欢故宫吗》挂画</p>
                            <span>现价￥38</span>


                        </div>
                    </li>
                    <li class="swiper-slide">

                        <span class="pic">
                                    <img src="/images/da1(41).jpg" alt="">
                                </span>
                        <div>
                            <p>《你喜欢故宫吗》挂画</p>
                            <span>现价   ￥38</span>


                        </div>
                    </li>

                </ul>


            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- <div class="swiper-pagination"></div> -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

        </div>

    </div>

    <!-- 底部 -->
    <footer></footer>









    <script src="/lib/require/require.min.js" data-main="/js/index.js">
    </script>
    <!-- <script>
    </script> -->

</body>


</html>